<template>
	<view class="">
		<headerinfo></headerinfo>
		<view class="width60">
			<u-navbar :title="userInfo.realname?userInfo.realname+'的名片':'名片'">
				<view class="u-nav-slot" slot="left">
					<u-icon name="home" size="25" @click="backHome"></u-icon>
				</view>
			</u-navbar>
			<view class="xuanke" v-if="type == 1">
				<view class="list">
					<view class="title">
						<view>{{ userInfo2.realname?userInfo2.realname:' - ' }} </view>
						<image v-if="userInfo2.avatar" :src="userInfo2.avatar" mode="aspectFill"
							style="width: 70rpx;height: 70rpx;border-radius: 50%;"></image>
					</view>
					<view class="main">
						<view class="box">
							<span>{{ userInfo2.nickname }}</span>
						</view>
						<view class="box">
							<span>{{ userInfo2.phone ? userInfo2.phone : '-' }}</span>
						</view>
					</view>
					<view class="main bodernone">
						<view class="box">
							<span>性别</span>
							<span>{{ userInfo2.sex == 'female' ?'女' : '男' }}</span>
						</view>
						<view class="box">
							<span>年龄</span>
							<span>{{ userInfo2.age ? userInfo2.age : '-' }}</span>
						</view>
						<view class="box">
							<span>出生地点</span>
							<span>{{ userInfo2.birthplace ? userInfo2.birthplace : '-' }}</span>
						</view>
						<view class="">
							<view class="box">
								<span>出生日期</span>
								<span>{{ userInfo2.birthday ? userInfo2.birthday : '-' }}</span>
							</view>
							<view class="mt-1">
								<span style="font-size: 30rpx; color: #7b7b7b;">生平</span>
								<textarea class="ml-5 " style="width: 80%; "
									:style="{ height: userInfo2.remark ? '100px' : '30px' }"
									:value="userInfo2.remark?userInfo2.remark:'-'" placeholder="-" />
							</view>
						</view>


					</view>
				</view>
			</view>
			<view class="shenping" v-else>
				<view class="box">
					<span>姓名</span>
					<span>{{ userInfo.realname ? userInfo.realname : '-' }}</span>
				</view>
				<view class="box">
					<span>昵称</span>
					<span>{{ userInfo.nickname ? userInfo.nickname : '-' }}</span>
				</view>
				<view class="box">
					<span>年龄</span>
					<span>{{ userInfo.age ? userInfo.age : '-' }}</span>
				</view>
				<view class="mt-1">
					<span style="font-size: 30rpx; color: #7b7b7b;">生平</span>
					<textarea class="ml-5" style="width: 80%; " :style="{ height: userInfo.remark ? '100px' : '30px' }"
						:value="userInfo.remark?userInfo.remark:'-'" placeholder="-" />
				</view>
			</view>


			<u-transition :show="true" mode="slide-left" v-if="type">
				<view class="inv-h-w">
					<view :class="['inv-h',Inv==0?'inv-h-se':'']" @click="Inv=0">{{userInfo.sex == 'female'?'她':'他'}}的文章
					</view>
					<view :class="['inv-h',Inv==1?'inv-h-se':'']" @click="Inv=1">{{userInfo.sex == 'female'?'她':'他'}}的生活
					</view>
				</view>
				<view class="tablists" v-if="Inv == 1">
					<span @click="changecurrentTab(index)" :class="currentTab == index?'active':''"
						v-for="(item,index) in tabBars" :key="index">{{item.name}}</span>
				</view>
				<view v-show="Inv == 0">
					<view class="content">
						<view>
							<view class="card" v-for="(item, index) in wenzhanglist" :key="index">
								<new-item :new="item" :newIndex="index" @share="showShareDia"></new-item>
							</view>
							<view class="nomore">
								没有更多了 ~
							</view>
						</view>
						<view class="nodata" v-if="wenzhanglist.length == 0 ">
							暂无数据
						</view>
					</view>

					<!-- <nodata top="60%" v-if="wenzhanglist.length == 0 "></nodata> -->
				</view>
				<view class="" v-show="Inv == 1">
					<view class="content">
						<view>
							<view class="card" v-for="(item, index) in shenhuolist" :key="index">
								<new-item :isMylife="true" :newIndex="index" :new="item" @share="showShareDia"></new-item>
							</view>
							<view class="nomore">
								没有更多了 ~
							</view>
						</view>
						<view class="nodata" v-if="shenhuolist.length == 0 ">
							暂无数据
						</view>
					</view>

					<!-- <nodata top="60%" v-if="shenhuolist.length == 0 "></nodata> -->
				</view>
				<view v-show="Inv == 2">
					<view class="content">
						<view>
							<view class="card" v-for="(item, index) in wenzhanglist" :key="index">
								<new-item :new="item" :newIndex="index" @share="showShareDia"></new-item>
							</view>
							<view class="nomore">
								没有更多了 ~
							</view>
						</view>
						<view class="nodata" v-if="wenzhanglist.length == 0 ">
							暂无数据
						</view>
					</view>

					<!-- <nodata top="60%" v-if="wenzhanglist.length == 0 "></nodata> -->
				</view>
			</u-transition>
			<u-transition :show="true" mode="slide-left" v-else>
				<view class="inv-h-w">
					<view :class="['inv-h',Inv==0?'inv-h-se':'']" @click="Inv=0">
						{{userInfo.sex == 'female'?'她':'他'}}参与的文章
					</view>
					<view :class="['inv-h',Inv==1?'inv-h-se':'']" @click="Inv=1">{{userInfo.sex == 'female'?'她':'他'}}的生活
					</view>
					<view :class="['inv-h',Inv==2?'inv-h-se':'']" @click="Inv=2">
						{{userInfo.sex == 'female'?'她':'他'}}发布的文章
					</view>
				</view>
				<view class="tablists" v-if="Inv == 1">
					<span @click="changecurrentTab(index)" :class="currentTab == index?'active':''"
						v-for="(item,index) in tabBars" :key="index">{{item.name}}</span>
				</view>
				<view v-show="Inv == 0">
					<view class="content">
						<view>
							<view class="card" v-for="(item, index) in wenzhanglist" :key="index">
								<new-item @videoPlay="videoPlayList" videoRefPrefix="List1" :new="item" :newIndex="index"
									@share="showShareDia"></new-item>
							</view>
							<view class="nomore">
								没有更多了 ~
							</view>
						</view>
						<view class="nodata" v-if="wenzhanglist.length == 0 ">
							暂无数据
						</view>
					</view>

					<!-- <nodata top="60%" v-if="wenzhanglist.length == 0 "></nodata> -->
				</view>
				<view class="" v-show="Inv == 1">
					<view class="content">
						<view>
							<view class="card" v-for="(item, index) in shenhuolist" :key="index">
								<new-item @videoPlay="videoPlayShenhuo" videoRefPrefix="Shenhuo" :isMylife="true"
									:showDelete="false" :new="item" :newIndex="index" @share="showShareDia"></new-item>
							</view>
							<view class="nomore">
								没有更多了 ~
							</view>
						</view>
						<view class="nodata" v-if="shenhuolist.length == 0 ">
							暂无数据
						</view>
					</view>

					<!-- <nodata top="60%" v-if="shenhuolist.length == 0 "></nodata> -->
				</view>
				<view v-show="Inv == 2">
					<view class="content">
						<view>
							<view class="card" v-for="(item, index) in wenzhanglist2" :key="index">
								<new-item @videoPlay="videoPlayList2" videoRefPrefix="List2" :new="item" :newIndex="index"
									@share="showShareDia"></new-item>
							</view>
							<view class="nomore">
								没有更多了 ~
							</view>
						</view>


						<view class="nodata" v-if="wenzhanglist2.length == 0 ">
							暂无数据
						</view>
					</view>

					<!-- <nodata top="60%" v-if="wenzhanglist.length == 0 "></nodata> -->
				</view>

			</u-transition>
			<uni-popup ref="popup" type="bottom">
				<share @closeDia="$refs.popup.close()"></share>
			</uni-popup>
		</view>

	</view>
</template>

<script>
	import newItem from '@/components/new-item.vue';
	import share from '@/components/share/share.vue'
	export default {
		components: {
			newItem,
			share
		},
		data() {
			return {
				Inv: 0,
				bgColor: '#de4849',
				titleStyle: {
					color: '#fff'
				},
				id: "",
				wenzhanglist2: [],
				wenzhangquery2: {
					isDraft: false,
					pageSize: 10,
					lastDocId: '',
					publisher: '',
					familyId: ''
				},
				wenzhangquery: {
					isDraft: false,
					pageSize: 10,
					familyAttenders: [],
					lastDocId: '',
					publisher: '',
				},
				shenghuoquery: {
					isDraft: false,
					pageSize: 10,
					username: '',
					lastDocId: '',
					categoryIds: []
				},
				wenzhanglist: [],
				shenhuolist: [],
				userInfo: {},
				type: '',
				userInfo2: {},
				currentTab: 0,
				tabBars: []
			};
		},
		onLoad(e) {

			console.log('card onLoad index', e)
			if (e.q) {
				console.log(e.q)
				let data = decodeURIComponent(e.q)
				let canshu = this.getUrlParams(data)
				// let dataArr = data.split('=')
				if (canshu.id) {
					this.id = canshu.id
					this.wenzhangquery.familyAttenders = [canshu.id]
					this.getUser()
					this.getwenzhang()
				}
				if (canshu.username) {
					this.wenzhangquery2.publisher = this.shenghuoquery.username = this.username = canshu.username
					this.wenzhangquery2.familyId = canshu.familyId
					this.getfenlei()
					this.getwenzhang2()
				}
			} else {
				if (e.card) {
					if (e.id) {
						this.id = e.id
						this.wenzhangquery.familyAttenders = [e.id]
						this.getUser()
						this.getwenzhang()
					}
					if (e.username) {
						this.wenzhangquery2.publisher = this.shenghuoquery.username = this.username = e.username
						this.wenzhangquery2.familyId = e.familyId
						this.getfenlei()
						this.getwenzhang2()
					}
				} else {
					if (e.type) {
						//文章的头像进来的
						this.type = e.type
						this.wenzhangquery.publisher = this.shenghuoquery.username = this.username = e.username
						this.getfenlei()
						this.getUserInfo()
						this.getwenzhang()
					}
				}

			}


		},
		onPullDownRefresh() {
			this.resetData()
		},
		onReachBottom() {
			// 触底的时候请求数据，即为上拉加载更多
			if (this.Inv == 0) {
				if (this.wenzhangquery.lastDocId) {
					this.getwenzhang(1)
				}
			} else {
				if (this.shenghuoquery.lastDocId) {
					this.getShenghuo(1)
				}
			}
		},

		methods: {
			videoPlayShenhuo(index) {
				console.log('videoPlayShenhuo',index);
				for (var i = 0; i < this.shenhuolist.length; i++) {
					if (i != index) {
						let video2 = uni.createVideoContext("videoShenhuo" + i, this);
						video2.pause();
					}
				}
				for (var i = 0; i < this.wenzhanglist.length; i++) {
					let video2 = uni.createVideoContext("videoList1" + i, this);
					video2.pause();
				}
				for (var i = 0; i < this.wenzhanglist2.length; i++) {
					let video2 = uni.createVideoContext("videoList2" + i, this);
					video2.pause();
				}
			},
			videoPlayList(index) {
				console.log('videoPlayList',index);
				for (var i = 0; i < this.shenhuolist.length; i++) {
					let video2 = uni.createVideoContext("videoShenhuo" + i, this);
					video2.pause();
				}
				for (var i = 0; i < this.wenzhanglist.length; i++) {
					if (i != index) {
						let video2 = uni.createVideoContext("videoList1" + i, this);
						video2.pause();
					}
				}
				for (var i = 0; i < this.wenzhanglist2.length; i++) {
					let video2 = uni.createVideoContext("videoList2" + i, this);
					video2.pause();
				}
			},
			videoPlayList2(index) {
				console.log('videoPlayList2',index);
				for (var i = 0; i < this.shenhuolist.length; i++) {
					let video2 = uni.createVideoContext("videoShenhuo" + i, this);
					video2.pause();
				}
				for (var i = 0; i < this.wenzhanglist.length; i++) {
					let video2 = uni.createVideoContext("videoList1" + i, this);
					video2.pause();
				}
				for (var i = 0; i < this.wenzhanglist2.length; i++) {
					if (i != index) {
						let video2 = uni.createVideoContext("videoList2" + i, this);
						video2.pause();
					}
				}
			},
			getUrlParams(url) {
				// 通过 ? 分割获取后面的参数字符串
				let urlStr = url.split('?')[1]
				// 创建空对象存储参数
				let obj = {};
				// 再通过 & 将每一个参数单独分割出来
				let paramsArr = urlStr.split('&')
				for (let i = 0, len = paramsArr.length; i < len; i++) {
					// 再通过 = 将每一个参数分割为 key:value 的形式
					let arr = paramsArr[i].split('=')
					obj[arr[0]] = arr[1];
				}
				return obj
			},

			// 分享到朋友圈
			onShareTimeline() {
				let id = this.checkShareItem.docId;
				let that = this
				let data = {
					title: that.checkShareItem.title,
					path: `/pages/news/details?id=${id}&showHome=1`,
					imageUrl: that.checkShareItem.posterUrl,
				}
				return data
			},
			// 分享给好友
			onShareAppMessage(options) {

				var that = this;
				let id = that.checkShareItem.docId;
				console.log(that.checkShareItem)
				var shareObj = {
					title: that.checkShareItem.title,
					desc: '',
					path: `/pages/news/details?id=${id}&showHome=1`,
					imageUrl: that.checkShareItem.posterUrl,
				}

				return shareObj;
			},
			showShareDia(item) {
				this.checkShareItem = item
				this.$refs.popup.open('bottom')
			},
			resetData() {
				if (this.Inv == 0) {
					this.wenzhangquery.lastDocId = ''
					this.wenzhanglist = []
					this.getwenzhang()
				} else {
					this.shenghuoquery.lastDocId = ''
					this.shenhuolist = []
					this.getShenghuo()
				}
			},
			backHome() {
				uni.reLaunch({
					url: '/pages/tabbar/index/index'
				})
			},
			getUser() {
				let data = {
					familyMemberId: this.id
				}
				this.$api.getMemberInfo(data).then(res => {
					console.log(res)
					this.userInfo = res

				})
			},
			getUserInfo() {
				let data = {
					username: this.username
				}
				this.$api.myInfo(data).then(res => {
					console.log(res)
					// this.userInfo = res
					this.userInfo = this.userInfo2 = res


				})
			},
			getwenzhang(type) {

				this.$api.queryArticles(this.wenzhangquery).then(res => {
					console.log('文章信息')
					console.log(res)
					this.wenzhangquery.lastDocId = res.lastDocId ? res.lastDocId : ''

					if (type == 1) {
						this.wenzhanglist = [...this.wenzhanglist, ...res.list]
					} else {
						this.wenzhanglist = res.list
					}
					uni.stopPullDownRefresh()
				})
			},
			getwenzhang2() {

				this.$api.queryArticles(this.wenzhangquery2).then(res => {
					console.log(res)
					this.wenzhangquery2.lastDocId = res.lastDocId ? res.lastDocId : ''

					this.wenzhanglist2 = [...this.wenzhanglist2, ...res.list]
					uni.stopPullDownRefresh()
				})
			},
			changecurrentTab(index) {
				if (this.currentTab == index) {
					return
				}

				this.currentTab = index

				this.getShenghuo()
			},
			getfenlei() {
				let tabBars = [{
					name: '全部',
					id: ''
				}];
				this.$api.getAllLifeCategories().then(res => {
					if (res) {
						for (let i in res) {
							tabBars.push({
								name: res[i],
								id: i
							});
						}
						console.log('tabBars')
						console.log(tabBars)
						this.tabBars = tabBars;
						this.getShenghuo(this.currentTab);
					}
				});
			},
			getShenghuo(type) {

				// this.currentTab = index;

				if (this.currentTab == 0) {
					this.shenghuoquery.categoryIds = [];
				} else {
					this.shenghuoquery.categoryIds = [this.tabBars[this.currentTab].id];
				}

				this.$api.queryLives(this.shenghuoquery).then(res => {
					console.log(res)
					this.shenghuoquery.lastDocId = res.lastDocId ? res.lastDocId : ''

					if (type == 1) {
						this.shenhuolist = [...this.shenhuolist, ...res.list]
					} else {
						this.shenhuolist = res.list
					}


					uni.stopPullDownRefresh()
				})
			}
		}
	};
</script>

<style lang="scss">
	.nomore {
		padding-bottom: 50rpx;
	}

	.inv-h-w {
		background-color: #FFFFFF;
		height: 90upx;
		display: flex;
		position: sticky;
		top: 115rpx;
		z-index: 1000;
	}

	.nodata {
		text-align: center;
		margin-top: 70rpx;
		color: #868282;
	}

	.tablists {
		display: flex;
		align-items: center;
		justify-content: space-between;
		white-space: nowrap;
		overflow-x: scroll;
		height: 95rpx;
		padding-left: 20rpx;

		span {
			margin-right: 25rpx;
			color: #8c8c8c;
		}

		.active {
			background-color: #de4849;
			color: white;
		}
	}


	.xuanke {
		.list {
			width: 100%;
			margin-top: 10rpx;
			padding: 20rpx;
			background-color: #fff;
			box-sizing: border-box;

			.title {
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1px solid #f5f5f5;
				padding-bottom: 15rpx;
				font-size: 30rpx;
			}
		}

		.main {
			padding-top: 15rpx;
			border-bottom: 1px solid #f5f5f5;

			.box {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-bottom: 23rpx;
				font-size: 28rpx;
			}

			.seeMore {
				font-size: 26rpx;
				text-align: center;
				color: #0081ff;
				padding-bottom: 20rpx;
			}
		}

		.bodernone {
			border: none;
		}
	}

	.inv-h {
		font-size: 30upx;
		flex: 1;
		text-align: center;
		color: #333;
		height: 90upx;
		line-height: 90upx;
	}

	.inv-h-se {
		color: #de4849;
		border-bottom: 4upx solid #de4849;
	}

	.shenping {
		padding: 20rpx;

		.title {
			font-size: 30rpx;
			color: #7b7b7b;
		}

		.box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 15rpx 0;

			span {
				font-size: 30rpx;
				color: #7b7b7b;
			}
		}
	}
</style>